<template>
    <app-layout v-model="bodyPt" title="消息" btnType="unset">
        <scroll-view class="tab-cate-group" :style="{ top: bodyPt + 'px' }" scroll-x>
            <view
                class="cate-item"
                v-for="(item, index) in tabList"
                :key="index"
                :class="{ active: tabIndex == index }"
                @click="tabIndex = index"
            >
                {{ item.name }}
            </view>
        </scroll-view>
        <view class="message-container">
            <swiper
                :current="tabIndex"
                :style="{ minHeight: '75vh', height: tabHeight + 'px' }"
                @change="switchTab($event.detail.current)"
            >
                <swiper-item v-for="(item, index) in tabList" :key="index">
                    <view :class="['tab' + index]">
                        <view class="message-item" v-for="(v, k) in item.list" :key="k" @click="toDetail(k, v)">
                            <text class="title limit-line clamp-1" :class="{ active: v.read == 0 }">{{ v.title }}</text>
                            <text class="date">{{ v.date }}</text>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import { mapState } from "vuex";
export default {
    name: "message",
    data() {
        return {
            utils: this.$utils,
            bodyPt: 0,
            loaded: false,
            timer: null,
            tabIndex: 0,
            tabHeight: 0,
            tabList: [],
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapState({
            messageTabIndex: (state) => state.system.messageTabIndex,
        }),
    },
    async onLoad() {
        await this.loadCate();
        this.switchTab(this.tabIndex);
    },
    onShow() {
        if (this.messageTabIndex != this.tabIndex) {
            this.tabIndex = this.messageTabIndex;
        }
        this.$store.commit("system/refreshOrder", true);
    },
    onReady() {},
    onReachBottom() {
        let currentTab = this.tabList[this.tabIndex];
        if (currentTab.more) {
            this.loadList(this.tabIndex);
        }
    },
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        switchTab(index) {
            this.tabIndex = index;
            this.$store.commit("system/messageTabIndex", index);
            let currentTab = this.tabList[this.tabIndex];
            currentTab.page = 1;
            currentTab.list = [];
            currentTab.more = true;
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 0,
            });
            this.loadList(index);
        },
        setTabHeight() {
            let query = uni.createSelectorQuery().in(this);
            query.select(".tab" + this.tabIndex).boundingClientRect();
            query.exec((res) => {
                if (res && res[0]) {
                    this.tabHeight = res[0].height;
                }
            });
        },
        /**
         * 加载分类
         */
        async loadCate() {
            if (this.loaded) return;
            await this.$models.system.notifyCate().then((cate) => {
                cate.forEach((item) => {
                    this.tabList.push({
                        id: item.id,
                        name: item.title,
                        more: true,
                        page: 1,
                        list: [],
                    });
                });
                this.loaded = true;
            });
        },
        /**
         * 加载列表
         */
        loadList() {
            let currentTab = this.tabList[this.tabIndex];
            this.$models.system.notifyList(currentTab.id, currentTab.page).then((list) => {
                if (list.length > 0) {
                    list.forEach((item) => {
                        currentTab.list.push({
                            id: item.id,
                            title: item.title,
                            read: item.see,
                            date: item.times,
                            content: item.message,
                        });
                    });
                    currentTab.page++;
                } else {
                    currentTab.more = false;
                }
                this.$nextTick(() => {
                    this.setTabHeight();
                });
            });
        },
        /**
         * 详情
         */
        toDetail(index, detail) {
            let currentTab = this.tabList[this.tabIndex];
            currentTab.list[index].read = 1;
            this.$utils.toPage("/pages/detail/detail?type=message&id=" + detail.id);
        },
    },
};
</script>

<style lang="less" scoped>
.tab-cate-group {
    z-index: 15;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 40rpx;
    background-color: #ffffff;
    .cate-item {
        display: inline-block;
        width: 167rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 30rpx;
        font-weight: bold;
        color: #999999;
        box-sizing: border-box;
    }
    .cate-item.active {
        color: #8b9aeb;
        border-bottom: 7rpx solid #8b9aeb;
    }
}
.message-container {
    z-index: 10;
    position: relative;
    top: 100rpx;
    padding: 20rpx 0;
    .message-item:first-child {
        margin-top: 0;
    }
    .message-item {
        width: 670rpx;
        margin: 20rpx auto 0 auto;
        background-color: #ffffff;
        font-weight: bold;
        font-size: 30rpx;
        line-height: 30rpx;
        box-sizing: border-box;
        padding: 30rpx;
        .title {
            color: #999999;
        }
        .title.active {
            color: #333333;
        }
        .date {
            display: block;
            color: #999999;
            margin-top: 24rpx;
        }
    }
}
.message-box {
    max-height: 400rpx;
    overflow-y: scroll;
}
</style>